<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1880456_bo4iko3ec4b.css">
<link rel="stylesheet" href="${request.contextPath}/static/css/gd-ui.css">
<aside class="back-aside" id="backAside">
	<a href="#top">
		<img width="16" height="16" src="/static/img/ins/back2top.png" alt="back to top" srcset="/static/img/ins/back2top@2x.png 2x">
	</a>
</aside>
<#include "./login/index.ftl">
<header>
	<section class="wrapper">
		<a href="/" class="header-logo">
			<img src="${request.contextPath}/static/img/logo32.png"  alt="gugeeData" sizes="(min-width: 1200px) 32px, 24px">
			<strong>Gugee Data</strong>
		</a>
	<#--    Tik Tok tab lt 15   -->
		<div class="gd-search">
			<div class="gd-search__wrap">
				<i class="iconfont iconsousuo1"></i>
				<input type="text" id="headerSearchInput" placeholder="Please enter influencer name">
			</div>
			<div class="search-wrap" id="headerSearchResultWrap">
				<ul class="search-tab">
					<li class="search-tab-item is-active" onclick="changeHeaderSearchPlat(this, 0)">Instagram</li>
					<li class="search-tab-item" onclick="changeHeaderSearchPlat(this, 1)">TikTok</li>
				</ul>
				<div class="result-list" id="headerSearchResultList">
				</div>
			</div>
		</div>
		<nav>
			<ul class="header-menu">
				<li class="<#if tab == 1>is-active</#if>">
					<a href="/">Home</a>
				</li>
				<li class="header-submenu" onmouseover="showPop(this)" onmouseout="hidePop(this)">
					<nav>
						<div class="header-submenu__title">
							<div>Instagram</div>
							<i class="iconfont icondown1"></i>
						</div>
						<div class="header-submenu__wrap">
							<dl>
								<dt>ELEMENTS</dt>
								<dd <#if tab == 25>class="is-active"</#if>>
									<a href="/instagram/hot-instagram-posts">Hot Posts</a>
								</dd>
							</dl>
							<dl>
								<dt>INFLUENCER</dt>
								<dd <#if tab == 15>class="is-active"</#if>>
									<a href="/instagram/search">Influencer Search</a>
								</dd>
								<dd <#if tab == 26>class="is-active"</#if>>
									<a href="/instagram/ad-partner-search">Ad Partner Search</a>
								</dd>
								<dd <#if tab == 21>class="is-active"</#if>>
									<a href="/instagram/rank-influencers">Comprehensive Leaderboard</a>
								</dd>
								<dd <#if tab == 22>class="is-active"</#if>>
									<a href="/instagram/follower-growth">Follower Growth Leaderboard</a>
								</dd>
								<dd <#if tab == 24>class="is-active"</#if>>
									<a href="/instagram/rank-commercial-partner">Commercial Partner Leaderboard</a>
								</dd>
							</dl>
							<dl>
								<dt>E-SHOP</dt>
								<dd <#if tab == 27>class="is-active"</#if>>
									<a href="/instagram/product-search">Popular Products</a>
								</dd>
								<dd <#if tab == 28>class="is-active"</#if>>
									<a href="/instagram/product-ranking">Products Ranking</a>
								</dd>
							</dl>
						</div>
					</nav>
				</li>
				<#--<li class="header-submenu" onmouseover="showPop(this)" onmouseout="hidePop(this)">
					<nav>
						<div class="header-submenu__title">
							<div>TikTok</div>
							<i class="iconfont icondown1"></i>
						</div>
						<div class="header-submenu__wrap">
							<ul>
								<li class="<#if tab==3>is-active</#if>">
									<a href="/influencer/gdindex">Influencer Search</a>
								</li>
								<li class="<#if tab==12>is-active</#if>">
									<a href="/ranking/follower">Follower Growth Leaderboards</a>
								</li>
							</ul>
						</div>
					</nav>
				</li>-->
				<li class="<#if tab == 2>is-active</#if>">
					<a href="/help-art/67/about-us">Help Center</a>
				</li>
				<li class="<#if tab==10>is-active</#if>">
					<a href="/pricing">Pricing</a>
				</li>
			</ul>
		</nav>
        <#if login == false>
			<button class="gd-btn btn-info" onclick="toLogin()">Register/Login</button>
        <#else>
			<div class="account-info" onmouseover="showAccountInfo()" onmouseout="hideAccountInfo()">
				<div class="account-avatar">
					<i class="iconfont iconUser"></i>
				</div>
				<div class="wrap">
					<div class="account-top">
						<div class="title">${(user.email)!''}</div>
						<div class="tag">
                            <#if user.roleId == 1>
								<span class="gray">BASIC</span>
                            <#elseif user.roleId == 2>
								<span class="blue">PLUS</span>
                            <#elseif user.roleId == 3>
								<span class="yellow">ADVANCED</span>
                            <#else >
								<span class="red">PRO</span>
                            </#if>
						</div>
					</div>
					<div class="account-detail">
						<div class="detail-item">
							<div class="label">Credits Balance：</div>
							<div class="data"> ${user.creditsBalance}</div>
						</div>
                        <#if user.roleId gt 1>
							<#--<div class="detail-item">
								<div class="label">Reports Remaining:</div>
								<div class="data"> ${user.dailyReports}</div>
							</div>-->
							<div class="detail-item">
								<div class="label">Membership Expires：</div>
                                <#setting datetime_format="MM/dd/yyyy"/>
								<div class="data"> ${user.expiredDate?number_to_datetime}</div>
							</div>
                        </#if>
					</div>
					<div class="account-detail is-link">
						<div class="detail-item">
							<a href="/order">
								<div class="label">Order History</div>
								<div class="item_affix">
									<i class="iconfont iconarrowright"></i>
								</div>
							</a>
						</div>
						<div class="detail-item">
							<a href="/instagram/favorite">
								<div class="label">My Favorites</div>
								<div class="item_affix">
									<i class="iconfont iconarrowright"></i>
								</div>
							</a>
						</div>
						<div class="detail-item">
							<a href="mailto: tk@gugeedata.com">
								<div class="label">Contact us</div>
								<div class="item_affix">
									<i class="iconfont iconarrowright"></i>
								</div>
							</a>
						</div>
					</div>
					<div class="account-footer" onclick="loginOut()">
						Log Out
					</div>
				</div>
			</div>
        </#if>
	</section>
	<section class="wrapper is-mobile">
		<div class="wrap">
			<div class="logo">
				<a href="/">
					<img src="${request.contextPath}/static/img/logo.png" width="24" height="24" alt="TikTok analysis">
				</a>
			</div>
			<div class="title">
                <#if tab == 3 || tab == 5 || (tab gte 11 && tab lt 15)>
	                TikTok Influencer
                <#elseif tab == 2>
	                Help Center
                <#elseif tab gte 15 || tab == 1>
	                Gugee Data
                <#elseif tab == 4>
	                TikTok Video
                <#elseif tab == 10>
	                Pricing
                </#if>
			</div>
			<div class="action">
                <#if (tab gte 20 && tab lte 22)>
	                <i class="iconfont iconsousuo" id="headerSearchIcon"></i>
                </#if>
				<i class="iconfont iconmenu-burger2" id="accountIcon"></i>
			</div>
		</div>
		<div class="search-page gd-search" id="headerSearchPage">
			<div class="search-header">
				<div class="left">
					<input type="text" maxlength="50" placeholder="Please enter influencer name">
					<i class="iconfont iconsousuo"></i>
				</div>
				<div class="right" id="headerSearchCancel">Cancel</div>
			</div>
			<div class="search-wrap" id="searchMobileResult">
				<ul class="search-tab">
					<li class="is-active" onclick="changeHeaderSearchPlat(this, 0)">Instagram</li>
					<li onclick="changeHeaderSearchPlat(this, 1)">TikTok</li>
				</ul>
				<div class="result-list">
				</div>
			</div>
		</div>
		<div class="sidebar" id="accountPage">
			<div class="sidebar-header">
				<div class="logo">
					<img src="${request.contextPath}/static/img/logo.png" alt="TikTok analysis">
				</div>
				<div class="center">Gugee Data</div>
				<i class="iconfont iconbuzhichi" id="closeAccount"></i>
			</div>
			<div class="sidebar-wrap">
                <#if login ==true>
					<div class="sidebar-top">
						<div class="account-info">
							<div class="avatar">
								<i class="iconfont iconUser"></i>
							</div>
							<div>
								<div class="title">${user.email!''}</div>
								<div class="tag">
                                    <#if user.roleId == 1>
										<span class="gray">BASIC</span>
                                    <#elseif user.roleId == 2>
										<span class="blue">PLUS</span>
                                    <#elseif user.roleId == 3>
										<span class="yellow">ADVANCED</span>
                                    <#else >
										<span class="red">PRO</span>
                                    </#if>
								</div>
							</div>
						</div>
						<div class="account-remain">
							Credits Balance: ${user.creditsBalance}
						</div>
                        <#if user.roleId gt 1>
                        <#--<div class="account-time">
							Reports Remaining: ${user.dailyReports}
						</div>-->
							<div class="account-time">
                                <#setting datetime_format="MM/dd/yyyy"/>
								Membership Expires: ${user.expiredDate?number_to_datetime}
							</div>
                        </#if>
					</div>
                </#if>
				<div class="sidebar-body">
					<div class="sidebar-item">
						<div class="title">
							<div class="title_inner">Instagram Elements</div>
							<i class="iconfont iconchevron-up-16px"></i>
						</div>
						<a href="/instagram/hot-instagram-posts">
							<div class="sub-sidebar-item">
								<div class="label">Hot Posts</div>
							</div>
						</a>
					</div>
					<div class="sidebar-item">
						<div class="title">
							<div class="title_inner">Instagram Influencer</div>
							<i class="iconfont iconchevron-up-16px"></i>
						</div>
						<a href="/instagram/search">
							<div class="sub-sidebar-item">
								<div class="label">Influencer Search</div>
							</div>
						</a>
						<a href="/instagram/ad-partner-search">
							<div class="sub-sidebar-item">
								<div class="label">Ad Partner Search</div>
							</div>
						</a>
						<a href="/instagram/rank-influencers">
							<div class="sub-sidebar-item">
								<div class="label">Comprehensive Leaderboard</div>
							</div>
						</a>
						<a href="/instagram/follower-growth">
							<div class="sub-sidebar-item">
								<div class="label">Follower Growth Leaderboard</div>
							</div>
						</a>
						<a href="/instagram/rank-commercial-partner">
							<div class="sub-sidebar-item">
								<div class="label">Commercial Partner Leaderboard</div>
							</div>
						</a>
					</div>
					<div class="sidebar-item">
						<div class="title">
							<div class="title_inner">Instagram e-Shop</div>
							<i class="iconfont iconchevron-up-16px"></i>
						</div>
						<a href="/instagram/product-search">
							<div class="sub-sidebar-item">
								<div class="label">Popular Products</div>
							</div>
						</a>
						<a href="/instagram/product-ranking">
							<div class="sub-sidebar-item">
								<div class="label">Products Ranking</div>
							</div>
						</a>
					</div>
                    <#if login == true>
						<div class="sidebar-item">
							<div class="title">
								My Account
								<i class="iconfont iconchevron-up-16px"></i>
							</div>
							<a href="/instagram/favorite">
								<div class="sub-sidebar-item">
									<div class="label">My Favorites</div>
								</div>
							</a>
							<a href="/order">
								<div class="sub-sidebar-item">
									<div class="label">Order History</div>
								</div>
							</a>
						</div>
                    </#if>
                    <#--<div class="sidebar-item">
						<div class="title">TikTok</div>
						<a href="/influencer/gdindex">
							<div class="sub-sidebar-item">
								<div class="label">TikTok Influencer</div>
								<i class="iconfont iconarrowright"></i>
							</div>
						</a>
						<a href="/ranking/follower">
							<div class="sub-sidebar-item">
								<div class="label">Follower Growth Leaderboards</div>
								<i class="iconfont iconarrowright"></i>
							</div>
						</a>
					</div>-->
				</div>
			</div>
			<div class="sidebar-footer">
                <#if login == false>
					<div class="footer-item" onclick="toLogin()">
						Log In
					</div>
                <#else>
					<div class="footer-item" onclick="loginOut()">
						Log Out
					</div>
                </#if>
				<div class="footer-item">
					<a href="/pricing">
						Pricing
					</a>
				</div>
				<div class="footer-item">
					<a href="mailto: tk@gugeedata.com">
						Contact us
					</a>
				</div>
			</div>
		</div>
	</section>
	<script src="${request.contextPath}/static/js/base.js"></script>
	<script src="${request.contextPath}/static/plugins/axios.min.js"></script>
	<script>
        const gugeeGobal = {
            isMobile: ${isMobile?c},
            roleId: +${(user.roleId)!'0'},
            isLogin: !!'${login?string('1', '')}',
        }
        const defaultImage = [
            ['${bloggerDefaultSmallImageUrl}', '${bloggerDefaultMiddleImageUrl}', '${bloggerDefaultLargeImageUrl}'],
            ['${mediaDefaultSmallImageUrl}', '${mediaDefaultMiddleImageUrl}', '${mediaDefaultLargeImageUrl}'],
            ['${productDefaultSmallImageUrl}', '${productDefaultMiddleImageUrl}', '${productDefaultLargeImageUrl}'],
        ]
        const IMAGE_TYPE = {
            BLOGGER: 0, // 64*64,128*128,192*192
            MEDIA: 1, // 222*222,444*444,666*666
            PRODUCT: 2, // 80*80,160*160,240*240
        }
        const IMAGE_SIZE = {
            SMALL: 0,
            MIDDLE: 1,
            LARGE: 2,
        }
	</script>
	<script src="${request.contextPath}/static/js/request.js"></script>
	<script>
        // back to top
        initHeaderEvent()
        function initHeaderEvent() {
            <#if isMobile == true>
            const backAside = document.getElementById('backAside')
            window.addEventListener('scroll', debounce(() => {
                if(getScroll().top > (screen.height / 2)) {
                    backAside.show()
                } else {
                    backAside.hide()
                }
            }))
			if(gugeeOS.isIPhone) {
                document.querySelector('.sidebar-item:last-child').style.marginBottom = '160px'
			}
            </#if>
            document.addEventListener('gesturestart', function (event) {
                event.preventDefault()
            })
            document.addEventListener('touchstart', function (event) {
                if (event.touches.length > 1) {
                    event.preventDefault();
                }
            });
            let lastTouchEnd = 0;
            document.addEventListener('touchend', function (event) {
                let now = (new Date()).getTime();
                if (now - lastTouchEnd <= 300) {
                    event.preventDefault();
                }
                lastTouchEnd = now;
            }, false);

            document.addEventListener('click', function (event) {
                if (event.touches && event.touches.length > 1) {
                    event.preventDefault();
                }
            });
            let accountIcon = document.getElementById('accountIcon')
            let accountPage = document.getElementById('accountPage')
            accountIcon.addEventListener('click', (e) => {
                accountPage.show()
                document.body.style.overflowY = 'hidden'
                document.body.style.position = 'fixed'
            })
            let closeAccount = document.getElementById('closeAccount')
            closeAccount.addEventListener('click', (e) => {
                accountPage.hide()
                document.body.style.overflowY = 'auto'
	            document.body.style.position = ''
            })
        }

        let urlParams = ''
        getURLParams()
        function getURLParams() {
            let url = window.location.href;
            if (url.indexOf('?') > 0) {
                urlParams = url.substring(url.indexOf('?'), url.length);
            }
        }

        const chl = getQueryByUrl('chl')
        if(chl) {
            sessionStorage.setItem('chl', chl)
        }

        // 头部搜索栏事件
        let headerSearchInput
		let headerSearchResultList
        let headerPlatType = 0

        if(gugeeGobal.isMobile) {
            const headerSearchIcon = document.getElementById('headerSearchIcon')
            if(headerSearchIcon) {
                headerSearchInput = document.querySelector('#headerSearchPage input')
                headerSearchResultList = document.querySelector('#searchMobileResult .result-list')
                const headerSearchPage = document.getElementById('headerSearchPage')
                const headerSearchEle = headerSearchInput.parentElement
                headerSearchIcon.addEventListener('click', e => {
                    headerSearchPage.show()
                })
                document.getElementById('headerSearchCancel').addEventListener('click', e => {
                    headerSearchPage.hide()
                })
                headerSearchInput.addEventListener('focus', e => {
                    headerSearchEle.style.borderColor = '#1890FF'
                    headerSearchEle.style.backgroundColor = '#FFF'
                })
                headerSearchInput.addEventListener('blur', e => {
                    e.target.parentElement.removeAttribute('style')
                    headerSearchEle.style.backgroundColor = '#F5F7FA'
                })
                headerSearchInput.addEventListener('input', debounce(e => {
                    if(e.target.value) {
                        if(headerPlatType === 0) {
                            headerSearchByIns()
                        } else {
                            headerSearchByTikTok()
                        }
                    }
                }, 300))
            }
        } else {
            headerSearchInput = document.getElementById('headerSearchInput')
            if(headerSearchInput) {
                headerSearchResultList = document.getElementById('headerSearchResultList')
                const headerSearchResultWrap = document.getElementById('headerSearchResultWrap')
                const headerSearchEle = headerSearchInput.parentElement
                headerSearchInput.addEventListener('focus', e => {
                    headerSearchEle.style.borderColor = '#1890FF'
                    headerSearchEle.style.backgroundColor = '#FFF'
                })
                headerSearchInput.addEventListener('blur', e => {
                    e.target.parentElement.removeAttribute('style')
                    headerSearchEle.style.backgroundColor = '#F5F7FA'
                })
                headerSearchInput.addEventListener('input', debounce(e => {
                    if(e.target.value) {
                        headerSearchResultWrap.show()
                        headerSearchByIns()
                    }
                }, 300))
                document.addEventListener('click', e => {
                    if(e.target.id !== 'headerSearchInput' &&
                        !e.target.classList.contains('search-tab-item')) {
                        headerSearchResultWrap.hide()
                    }
                })
            }
        }

        function changeHeaderSearchPlat(e, type) {
            if(headerPlatType !== type) {
                headerPlatType = type
                e.parentElement.querySelector('.is-active').classList.remove('is-active')
                e.classList.add('is-active')
                if(headerPlatType === 0) {
                    headerSearchByIns()
                } else {
                    headerSearchByTikTok()
                }
            }
        }
        function headerSearchByIns() {
            if(!headerSearchInput.value){
                return false
            }
            headerSearchResultList.showLoading()
            const url = getEncodeUrl('/ins/blogger/search', {
                username: headerSearchInput.value
            })
            _axios.get(url).then(res => {
                if(res.Code === 200) {
                    const list = res.Data.list
                    let str = ''
                    if(list.length > 0) {
                        list.forEach(item => {
                            str += '<a href="/instagram/influencer/' + item.username + '">'
                            str += '<div class="result-item">' +
                                '<div class="avatar">' +
                                '<img class="img-avatar" src="' + item.picUrl + '" alt="' + item.fullName + '">'
                            if(item.isVerified) {
                                str += '<img class="icon" src="${request.contextPath}/static/img/ins/Authentication.png" srcset="${request.contextPath}/static/img/ins/Authentication@2x.png 2x" alt="auth">'
                            }
                            str += '</div>' +
                                '<div class="user-info">' +
                                '<div class="title">' + item.fullName + '</div>' +
                                '<div class="sub-title">' + item.username + ' • Follower ' + numFormat(item.followerCount) +
                                '</div>' +
                                '</div>' +
                                '</div>'
                            str += '</a>'
                        })
                        headerSearchResultList.innerHTML = str
                        headerSearchResultList.querySelectorAll('a').forEach(item => {
                            item.addEventListener('click', e => {
                                e.stopPropagation()
                            })
                        })
                    } else {
                        showNoDataImg(headerSearchResultList)
                    }
                }
                headerSearchResultList.hideLoading()
            })
        }
        function headerSearchByTikTok() {
            if(!headerSearchInput.value){
                return false
            }
            headerSearchResultList.showLoading()
            _axios.get('/tiktoker/search?keyword=' + headerSearchInput.value).then(res => {
                if (res.Code === 200) {
                    let list = res.Data
                    if (list.length > 0) {
                        let str = ''
                        res.Data.forEach(item => {
                            str += '<a href="/tiktoker/' + item.uniqueId + '">'
                            str += '<div class="result-item">' +
                                '<div class="avatar">' +
                                '<img class="img-avatar" src="' + item.avatar + '" alt="' + item.nickname + '">'
                            if(item.customVerify || item.enterpriseVerifyReason) {
                                str += '<img class="icon" src="${request.contextPath}/static/img/ins/Authentication.png" srcset="${request.contextPath}/static/img/ins/Authentication@2x.png 2x" alt="auth">'
                            }
                            str += '</div>' +
                                '<div class="user-info">' +
                                '<div class="title">' + item.nickname + '</div>' +
                                '<div class="sub-title">' + item.uniqueId + ' • Follower ' + item.followerCount +
                                '</div>' +
                                '</div>' +
                                '</div>'
                            str += '</a>'
                        })
                        headerSearchResultList.innerHTML = str
                    } else {
                        showNoDataImg(headerSearchResultList)
                    }
                    headerSearchResultList.hideLoading()
                }
            })
        }

        function toLogin() {
            let loginDom = document.querySelector('.login-section')
	        if(gugeeGobal.isMobile) {
				if(getScroll().top > 0) {
                    loginDom.style.top = getScroll().top + 'px'
				} else {
                    loginDom.style.top = '0'
				}
	        } else {
                if(getScroll().top > 0) {
                    loginDom.style.top = 'calc(50% + ' + getScroll().top + 'px)'
                }
                else {
                    loginDom.style.top = '50%'
                }
	        }
            showMask({
                event: () => {
                    hideLogin()
                }
            })
			visitRecord (8)
            loginDom.show()
            document.querySelectorAll('.login-section .login-wrap').forEach((item, index) => {
                if(index === 0) {
                    item.show()
                    document.querySelector('.login-section .login-footer-tx').innerHTML =
                        'Not registered yet? <a href="javascript:;" onclick="toRegister()">Create a new account</a>'
                }else {
                    item.hide()
                }
            })
	        return false
        }
        function hideLogin() {
            hideMask()
            document.querySelector('.login-section').hide()
        }

        function toBloggerDetail(id) {
            window.location.href = '/tiktoker/' + id
        }

        function loginOut() {
            showLoading()
            _axios.get('/v1/login/out').then((res) => {
                if (res.Code === 200) {
                    window.location.reload()
                } else {
                    hideLoading()
                }
	        })
        }

        <#if login == true>
	        function showAccountInfo() {
	            document.querySelector('.account-info .wrap').show()
	        }
	        function hideAccountInfo() {
	            document.querySelector('.account-info .wrap').hide()
	        }
        </#if>
        function showPop(e) {
            e.querySelector('.header-submenu__wrap').show('flex')
        }
        function hidePop(e) {
            e.querySelector('.header-submenu__wrap').hide()
        }

		// record
		function visitRecord(id) {
            _axios.post('/v1/sys/visit/record', {
				id: id
            }).then(res => {
				if(res.Code !== 200) {
				    console.error(res)
				}
            })
		}

	</script>
	<script type="module">
		const items = document.querySelectorAll('.sidebar-item .title')
		items.forEach(item => {
		    item.addEventListener('click', () => {
                item.parentElement.classList.toggle('is-close')
		    })
		})
        if(gugeeOS.isIPhone) {
            document.querySelector('.sidebar-footer').style.paddingBottom = '139px'
        }
        console.log('See you again......')
	</script>
</header>
